<script>

    $.ajax({
        url: './mysql/query.php?query=' + 'listar_ausencia',
        data: null,
        dataType: 'json',
        success: function(data)
        {
            mostrarFilasAusencia(data);
        },
        failure: function(response) {
            console.log("failure:" + response)
        },
        error: function(response) {
            console.log(response.status)
            if (response.status === 401) {
                $("#content").html("Usuario no autorizado");
            }

        }

    });

    function mostrarFilasAusencia(data) {
        $("tr.ausencia").remove();
        $.each(data, function(indice, valor) {
            
            var cadena = jsonToString(valor);
            
            console.log("cadena>>>" + cadena)
            var tr = '<tr class="ausencia" id="' + valor.id_ausencia + '">\n\
                                <td>' + valor.cedula + '</td>'
                    + '<td>' + valor.nombre + '</td>'
                    + '<td>' + valor.apellido + '</td>'

                    + '<td>' + moment(valor.desde).format("DD-MM-YYYY") + '</td>'
                    + '<td>\n\
                                    <button class"btn btn-mini" onClick="mostrarDetalle(\'' + cadena + '\');" title="Mostrar informacion detallada"><i class="icon-zoom-in"></i></button>\n\
                                    <button class"btn btn-mini" onClick="editarAusencia(\'' + cadena + '\');" title="Editar"><i class="icon-edit"></i></button>\n\
                                    <button title="Eliminar"  onClick="deleteAusencia(\'' + valor.id_ausencia + '\');" class"btn btn-mini "><i class="icon-trash"></i></button>\n\
                                </td>\n\
                            </tr>';

            $("#tablePersonal").append(tr);
            $(":button").tooltip();

        });
    }

    function mostrarDetalle(ausencia) {

        ausencia = $.parseJSON(ausencia.replace(/'/g, '"'))
        var cadena = ""
        if (ausencia.sexo === "M") {
            cadena += "<strong>Datos del Sr. " + ausencia.nombre + " " + ausencia.apellido + "</Strong> </br>";
        } else if (ausencia.sexo === "F") {
            cadena += "<strong>Datos del Sra. " + ausencia.nombre + " " + ausencia.apellido + "</Strong> </br>";
        }
        cadena += "Sexo: " + ausencia.sexo + "<br/>";
        cadena += "Direccion: " + ausencia.direccion + "<br/>";
        cadena += "Observacion: " + ausencia.observacion + "<br/>";
        cadena += "Fecha de inicio: " + moment(ausencia.desde).format("DD-MM-YYYY") + "<br/>";
        cadena += "Fecha de fin: " + moment(ausencia.hasta).format("DD-MM-YYYY") + "<br/>";
        $("#content").html(cadena);
    }

    function editarAusencia(valor) {
        console.log(valor.replace(/'/g, '"'))
        console.log("vloress: "+$.parseJSON(valor.replace(/'/g, '"')))
        var json = $.parseJSON(valor.replace(/'/g, '"'));
        json.accion = "Actualizar";
        $.get("../ausencia/form_ausencia.php", json)
                .done(function(data) {
            $("#containerPrincipal").html(data)
        });


    }
    function deleteAusencia(id) {
        if (!confirm("¿Esta seguro que desea eliminar este registro?")) {
            return;
        }
        $.ajax({
            url: './mysql/query.php?query=' + 'delete_ausencia&valor=' + "'" + id + "'",
            data: null,
            dataType: 'json',
            success: function(data)
            {
                $('#' + id).remove();
            },
            failure: function(response) {
                console.log("failure:" + response)
            },
            error: function(response) {
                console.log(response.status)
                if (response.status === 401) {
                    $("#content").html("Usuario no autorizado");
                }

            }

        });
    }
    function buscar(campo) {
        var url = "";

        if (campo === "cedula") {
            url = './mysql/query.php?query=' + 'listar_ausencia_cedula&valor=' + "'" + $('#inputFilter').val() + "'"
        }
        if (campo === "fecha") {
            url = './mysql/query.php?query=' + 'listar_ausencia_fecha&valor=' + "'" + $('#inputFilter').val() + "'"
        }

        $.ajax({
            url: url,
            data: null,
            dataType: 'json',
            success: function(data)
            {
                console.log(data);
                if (data != '{"result":0}') {
                    mostrarFilasAusencia(data);
                } else {
                    $("tr.ausencia").remove();
                }
            },
            failure: function(response) {
                console.log("failure:" + response)
            },
            error: function(response) {
                console.log(response.status)
                console.log(response)
                if (response.status === 401) {
                    $("#content").html("Usuario no autorizado");
                }

            }

        });
    }

</script>


<div id="content" class="hero-unit">
    <div class="input-append">
        <input class="input-large" id="inputFilter" type="text">
        <div class="btn-group">
            <button style="font-size: 19px" class="btn dropdown-toggle" data-toggle="dropdown">
                Buscar por
                <i class="icon-search"></i>
            </button>
            <ul class="dropdown-menu">
                <li><a href="javascript:buscar('cedula')">Cedula</a></li>
                <li><a href="javascript:buscar('fecha')">Fecha</a></li>
            </ul>
        </div>
    </div>
    <button class="btn pull-right" onClick="form_ausencia();" title="Nuevo ingreso"><i class="icon-plus-sign"></i>Registrar</button>
    <table class="table table-striped" id="tablePersonal">
        <thead>
            <tr>
                <th> Cedula</th>
                <th> Nombre</th>
                <th> Apellido</th>
                <th> Fecha inicio </th>

            </tr>
        </thead>
    </table>
</div>


